package com.example.nick.bodyapplication.compose

import android.util.Log
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.layout
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.sp
import com.example.nick.bodyapplication.R
import com.example.nick.bodyapplication.compose.style.colorMkLine
import kotlin.math.roundToInt

fun Modifier.percentOffsetX(percent: Float) = this.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout(placeable.width, placeable.height) {
        placeable.placeRelative(IntOffset((placeable.width * percent).roundToInt(), 0))
    }
}

@Composable
fun MkActionBar(
    title: String,
    onLeftClick: (() -> Unit)? = null,
    onRightClick: (() -> Unit)? = null,
    @DrawableRes rightIconId: Int? = null
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = Color.White)
            .height(Dp(44f))
    ) {
        Image(
            painter = painterResource(id = R.drawable.icon_backward),
            modifier = Modifier
                .clickable { onLeftClick?.invoke() }
//                .width(Dp(64f))
                .padding(start = Dp(16f), end = Dp(16f))
                .fillMaxHeight(),
            //.align(alignment = Alignment.CenterVertically),
            contentDescription = null,
            contentScale = ContentScale.Inside
        )

        Text(
            text = title,
            fontSize = 16.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .align(Alignment.Center)
        )

        rightIconId?.let {
            Image(
                painter = painterResource(id = it),
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .clickable { onRightClick?.invoke() }
                    .padding(start = Dp(16f), end = Dp(16f))
                    .fillMaxHeight(),
                //.align(alignment = Alignment.CenterVertically),
                contentDescription = null,
                contentScale = ContentScale.Inside
            )
        }

//        Row {
//            Image(
//                painter = painterResource(id = R.drawable.icon_backward),
//                modifier = Modifier
//                    .clickable { onLeftClick?.invoke() }
////                .width(Dp(64f))
//                    .padding(start = Dp(16f), end = Dp(16f))
//                    .fillMaxHeight(),
//                //.align(alignment = Alignment.CenterVertically),
//                contentDescription = null,
//                contentScale = ContentScale.Inside
//            )
//            Text(
//                text = title,
//                fontSize = 16.sp,
//                textAlign = TextAlign.Center,
//                modifier = Modifier
//                    .align(Alignment.CenterVertically)
//                    .weight(1f)
//            )
//            rightIconId?.let {
//                Image(
//                    painter = painterResource(id = it),
//                    modifier = Modifier
//                        .clickable { onRightClick?.invoke() }
//                        .padding(start = Dp(16f), end = Dp(16f))
//                        .fillMaxHeight(),
//                    //.align(alignment = Alignment.CenterVertically),
//                    contentDescription = null,
//                    contentScale = ContentScale.Inside
//                )
//            }
//        }
        //EEF3F4
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(Dp(1f))
                .background(color = colorMkLine)
                .align(alignment = Alignment.BottomCenter)
        ) {}
    }
}

@Composable
fun MkSettingItem(
    @DrawableRes leftIcon: Int? = null,
    leftTxt: String,
    rightSwitch: Boolean? = null,
    rightTxt: String? = null,
    onItemCLick: ((Int) -> Unit)?
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = Color.White)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(), // null表示无效果，rememberRipple表示波纹
                enabled = rightSwitch == null,
                onClick = { onItemCLick?.invoke(0) })
            .height(Dp(48f))
    ) {
        Row(
            modifier = Modifier
                .fillMaxHeight()
        ) {
            leftIcon?.let {
                Image(
                    painter = painterResource(id = leftIcon),
                    modifier = Modifier
                        .clickable { onItemCLick?.invoke(1) }
                        .padding(end = Dp(16f))
                        .fillMaxHeight(),
                    //.align(alignment = Alignment.CenterVertically),
                    contentDescription = null,
                    contentScale = ContentScale.Inside
                )
            }

            Text(
                text = leftTxt,
                fontSize = 14.sp,
                textAlign = TextAlign.Start,
                modifier = Modifier
                    .align(Alignment.CenterVertically)
                    .weight(1f)
            )

            rightTxt?.let {
                Text(
                    text = it,
                    fontSize = 12.sp,
                    textAlign = TextAlign.End,
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                )
            }

            if (rightSwitch == null) {
                Image(
                    painter = painterResource(id = R.drawable.arrow_right_gray),
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .clickable { onItemCLick?.invoke(2) }
                        .padding(start = Dp(16f))
                        .fillMaxHeight(),
                    //.align(alignment = Alignment.CenterVertically),
                    contentDescription = null,
                    contentScale = ContentScale.Inside
                )
            } else {
                val status = rememberSaveable() { mutableStateOf(rightSwitch) }
                val switchRes = if (status.value) R.drawable.switch_on else R.drawable.switch_off
                Image(
                    painter = painterResource(id = switchRes),
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .clickable {
                            status.value = !status.value
                            Log.i("Compose", "onCheckedChange status.value:${status.value}")
                            onItemCLick?.invoke(if (status.value) 4 else 3)
                        }
                        .padding(start = Dp(16f))
                        .fillMaxHeight(),
                    //.align(alignment = Alignment.CenterVertically),
                    contentDescription = null,
                    contentScale = ContentScale.Inside
                )


//                Log.i("Compose", "onCheckedChange status:${status.value}")
//                Switch(
//                    checked = status.value,
//                    onCheckedChange = {
//                        status.value = it
//                        Log.i("Compose", "onCheckedChange:$it, status.value:${status.value}")
//                        onItemCLick?.invoke(if (status.value) 4 else 3)
//                    },
//                    modifier = Modifier
//                        .align(Alignment.CenterVertically)
//                        .padding(start = Dp(16f)),
//                    enabled = true,
//                    /**
//                     * checkedThumbColor - 启用和选中时用于拇指的颜色
//                     * checkedTrackColor - 启用和选中时用于轨道的颜色
//                     * checkedTrackAlpha - 应用于 checkedTrackColor 和 disabledCheckedTrackColor 的 alpha
//                     * uncheckedThumbColor - 启用和取消选中时用于拇指的颜色
//                     * uncheckedTrackColor - 启用和未选中时用于轨道的颜色
//                     * uncheckedTrackAlpha - 应用于 uncheckedTrackColor 和 disabledUncheckedTrackColor 的 alpha
//                     * disabledCheckedThumbColor - 禁用和选中时用于拇指的颜色
//                     * disabledCheckedTrackColor - 禁用和选中时用于轨道的颜色
//                     * disabledUncheckedThumbColor - 禁用和未选中时拇指使用的颜色
//                     * disabledUncheckedTrackColor - 禁用和未选中时用于轨道的颜色
//                     */
//                    //Color(0xFF0000FF)
//                    colors = SwitchDefaults.colors(
//                        checkedThumbColor = colorMkThumb,          //启用和选中时用于拇指的颜色
////                        checkedTrackColor = colorMkTrack,             //启用和选中时用于轨道的颜色
////                        checkedTrackAlpha = 1.0f,
////                        uncheckedThumbColor = Color(R.color.mk_track_off),
////                        uncheckedTrackColor = Color(R.color.mk_track_black),
////                        uncheckedTrackAlpha = 1.0f
//                    )
//                )
            }
        }
        //EEF3F4
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(Dp(1f))
                .background(color = colorMkLine)
                .align(alignment = Alignment.BottomCenter)
        ) {}
    }
}